import React, { useEffect, useState } from "react";
import CommonModal from "@/components/CommonModal";
import SubTitle from '@/components/SubTitle';
import { Form, message, Radio } from "antd";
import { cancelMatch } from "../../../service";
import { setGlobalConfig, getGlobalConfig } from '@/utils/authority';

//解除匹配
function CancelMatch(props) {

	const { ids = [], isSkuType, operaType, fetchList, formData, onCancel } = props;

	const pageConfig = getGlobalConfig('systemGoodsPageConfig');

	const removeType = pageConfig.removeType || 1;

	const [form] = Form.useForm();

	const [open, setOpen] = useState(false);

	useEffect(() => {
		setOpen(true);
	}, [])

	//更新
	const onChange = e => {
		const val = e.target.value;
		console.log(val, 'val')
		setGlobalConfig('systemGoodsPageConfig', {
			...pageConfig,
			'removeType': val
		})
	};

	//点击确定
	const onOk = async () => {
		const val = form.getFieldsValue();
		const params = {
			operateType: operaType,
			removeType: val.removeType,
			goodsType: isSkuType ? 1 : 2
		};
		if (operaType == 1) {
			if(isSkuType) {
				params.skuIdList = ids;
			} else {
				params.spuIdList = ids;
			}
		} else {
			if(isSkuType) {
				params.goodsSkuParam = { ...formData, isOrder: 0 };
			} else {
				params.goodsSpuParam = formData;
			}
		}
		START_LOADING();
		const { success } = await cancelMatch(params);
		END_LOADING();
		if(success) {
			const tips = operaType == 1 ? '操作成功' : '操作成功，请稍后刷新查看';
			message.success(tips);
			setOpen(false);
			fetchList();
		}
	}

	const handleCancel = () => {
		setOpen(false);
	}

	const afterClose = () => {
		onCancel();
	}

	return (
		<CommonModal
			title="解除匹配"
			open={open}
			width="450px"
			onOk={onOk}
			onCancel={handleCancel}
			afterClose={afterClose}
		>
			<SubTitle title={"是否解除匹配？"} as="s2" symbol />
			<Form
				name="cancel-match-form"
				form={form}
				style={{ marginTop: '16px' }}
				autoComplete="off"
				initialValues={{
					removeType
				}}
			>
				<Form.Item
					label=""
					name="removeType"
				>
					<Radio.Group onChange={onChange}>
						<Radio value={1}>解除默认匹配</Radio>
						<Radio value={2}>解除非默认匹配</Radio>
						<Radio value={3}>解除所有匹配</Radio>
					</Radio.Group>
				</Form.Item>
			</Form>
		</CommonModal>
	);
}

export default CancelMatch;
